<template>
    <div class="mapPage">
        <div id="map"></div>
    </div>
</template>

<script>
import axios from 'axios';
import * as echarts from "echarts";
import { onMounted, reactive } from 'vue';
import {mapPage} from '../../../api/echart'
export default {
    name: 'MapPage',

    setup() {

        let mapData = reactive({})

        async function getState() {
            mapData = await axios.get('http://localhost:10777/map/china.json')
            // mapData = await axios.get('http://10.7.164.51:10777:10777/map/china.json')
        }

        onMounted(() => {

            getState().then(() => {
                console.log('map', mapData.data)

                echarts.registerMap('china', mapData.data)
                let myChart = echarts.init(document.getElementById('map'));
                myChart.setOption({
                    geo: {
                        map: 'china',
                        itemStyle:{
                            areaColor: '#0099ff',
                            borderColor: '#00ffff',
                            shadowColor: 'rgba(230,130,70,.5)',
                            shadowBlur: 30,
                            emphasis: {
                                focus: 'self'
                            }
                        }
                    },
                    tooltip: {
                        trigger:'item'
                    },
                    title:{
                        text: '全国开设防疫服务点',
                        left: '38%',
                        textStyle:{
                            color:'#fff',
                            fontSize:20,
                            textShadowBlur: 10,
                            textShadowColor:'#33ffff'
                        }
                    },
                    series:[
                        {
                            type:'scatter',
                            itemStyle:{
                                color:'red'
                            },
                            coordinateSystem: 'geo',
                            data: [
                                {name:'北京', value:[116.46, 39.92, 4376]},
                                {name: '上海', value:[121.48, 31.22, 8675]},
                                {name: '深圳', value:[114.07, 31.22, 8675]},
                                {name: '广州', value:[113.23, 23.16, 187]},
                                {name: '西安', value:[108.45, 34, 187]},
                                {name: '贵州', value:[106.71, 26.57, 187]},
                                {name: '四川', value:[104.06, 30, 187]},
                                {name: '黑龙江', value:[127.9688, 45.368, 187]},
                            ],
                        }
                    ]
                });
            });
        });

        return {
            getState, mapData
        }
    }

}
</script>

<style lang="less" scoped>
.mapPage {
    width: 100%;
    height: 100%;
}

#map{
    width: 100%;
    height: 100%;
    margin-top: 20px;
}
</style>
